<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="description" content="Oellfare - Charity Template">
    <meta name="author" content="">

    <!-- Page Title -->
    <title>链上善行公益-阅读公益项目</title>

    <!-- Favicon and Touch Icons -->
    <link href="front/images/logo1.png" rel="shortcut icon" type="image/png">

    <!-- Lead Style -->
    <link href="front/css/style.css" rel="stylesheet" type="text/css">

    <!-- Boot Strap -->
    <link href="front/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- swiper -->
    <link href="front/css/swiper.css" rel="stylesheet" type="text/css">
    <!--引入Jquery-->
    <script src="front/js/jquery.min.js"></script>
    <link href="front/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="common/js/bootstrap.min.js"></script>
    <!--引入MarkDown-->
    <link rel="stylesheet" type="text/css" href="common/EditorMD/css/editormd.preview.css" />
    <link rel="stylesheet" type="text/css" href="common/css/xtiper.css" />
    <script type="text/javascript" src="common/EditorMD/lib/marked.min.js"></script>
    <script type="text/javascript" src="common/EditorMD/lib/prettify.min.js"></script>
    <script type="text/javascript" src="common/EditorMD/lib/raphael.min.js"></script>
    <script type="text/javascript" src="common/EditorMD/lib/underscore.min.js"></script>
    <script type="text/javascript" src="common/EditorMD/lib/sequence-diagram.min.js"></script>
    <script type="text/javascript" src="common/EditorMD/lib/flowchart.min.js"></script>
    <script type="text/javascript" src="common/EditorMD/lib/jquery.flowchart.min.js"></script>
    <script type="text/javascript" src="common/EditorMD/editormd.amd.min.js"></script>
    <script type="text/javascript" src="common/js/xtiper.min.js"></script>
    <script type="text/javascript" src="common/js/comment.js"></script>
    <script src="front/js/bootstrap.min.js"></script>
    <script src="front/js/menu.js"></script>
    <script src="front/js/select2.js"></script>
    <script src="front/js/jquery.fancybox.min.js"></script>
    <script src="front/js/owl.carousel.min.js"></script>
    <script src="front/js/spectragram.min.js"></script>
    <script src="front/js/wow.js"></script>
    <script src="front/js/custom.js"></script>
    <link href="front/css/css1.css" rel="stylesheet">
    <link rel="stylesheet" href="front/css/swiper.min.css">
    <link rel="stylesheet" href="front/css/index2.css">
    <style>
        .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
            border-bottom-color: #E4E7ED;
        }
        .el-tabs--card>.el-tabs__header .el-tabs__item {
            border-bottom: 1px solid #E4E7ED;
            border-left: 1px solid #E4E7ED;
            -webkit-transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
            transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
        }
        .disabled {
            opacity: 0.5;
            pointer-events: none;
            cursor: not-allowed;
        }
        .el-step__head.is-success {
            color: #509af8;
            border-color: #509af8;
        }
        .el-step__title.is-success {
            color: #509af8;
        }
        .el-steps--horizontal {
            white-space: nowrap;
            margin-top: 40px;
        }
        .itema{
            margin-top: 10px;
            font-weight: bold;

        }
        .notification-btn {
            border: none;
            background-color: transparent;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 999;
            padding: 10px 20px;
            border-radius: 5px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease-in-out;
        }

        .notification.show {
            opacity: 1;
            transform: translateY(0);;
        }

        .notification.success {
            background-color: #e1f3d8;
            color: #4caf50;
        }

        .notification.warning {
            background-color: #fffbe6;
            color: #ffca28;
        }

        .notification.info {
            background-color: #e6f7ff;
            color: #2196f3;
        }

        .notification.error {
            background-color: #ffebee;
            color: #f44336;
        }
    </style>
    <style>
        .hidden {
            display: none;
        }
        .power_blog_details .power_blog_full_content img{
            margin: 0px;
        }
        .power_blog_details .power_blog_full_content p{
            margin: 10px;
        }
        .latest_del{
        }
        .container3{
            display: flex;
            justify-content: center;
            height: 300px;
            width: 200px;
            position: absolute;
            left: 20px;
            margin-top: 8px;
        }
        ul.time_line{
            list-style: none;
        }
        .time_line>li{
            display: flex;
        }
        .time_line .line{
            display: flex;
            flex-flow: column;
            align-items: center;
            padding : 0 1rem;
        }
        .time_line .line::before{
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
            content: "";
            background:#bbb;
        }
        .time_line .line::after{
            border-left: 1px solid #bbb;
            content: "";
            flex-grow: 1;
            margin: 0.5rem 0;
        }
        .time_line .main_body{
            display: flex;
            flex-flow: column;
        }
        .time_line .main_body .time{
            font-size:.8rem;
            color:gray;
        }
        .info {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            width: 320px;
            padding: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            background: #509AF8;
            border-radius: 8px;
            box-shadow: 0px 0px 5px -3px #111;
            margin-top: 30px;
        }

        .info__icon {
            width: 20px;
            height: 20px;
            transform: translateY(-2px);
            margin-right: 8px;
        }

        .info__icon path {
            fill: #fff;
        }

        .info__title {
            font-weight: 500;
            font-size: 14px;
            color: #fff;
        }

        .info__close {
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-left: auto;
        }

        .info__close path {
            fill: #fff;
        }
    </style>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .shell {
            width: 100%;
            position: relative;
            padding: 80px 0;
            transition: 0.3s ease 0s;
            background-attachment: fixed;
            background-size: cover;
        }

        .shell:before {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgb(245, 251, 255), #e6f4ff);;
            content: "";
        }

        .header {
            width: 100%;
            text-align: center;
            margin-bottom: 80px;
            position: relative;
        }

        .title {
            color: #000000;
            font-size: 46px;
            font-weight: normal;
            margin: 0;
        }

        .timeline {
            display: flex;
            margin: 0 auto;
            flex-wrap: wrap;
            flex-direction: column;
            max-width: 700px;
            position: relative;
        }

        .content-title {
            font-weight: normal;
            font-size: 66px;
            margin: -10px 0 0 0;
            transition: 0.4s;
            padding: 0 10px;
            box-sizing: border-box;
            color: #000000;
        }

        .content-desc {
            margin: 0;
            font-size: 15px;
            box-sizing: border-box;
            color: #000000;
            line-height: 25px;
        }

        .timeline:before {
            position: absolute;
            left: 50%;
            width: 2px;
            height: 100%;
            margin-left: -1px;
            content: "";
            background: #000000;
        }

        .item {
            padding: 40px 0;
            opacity: 0.3;
            filter: blur(2px);
            transition: 0.5s;
            box-sizing: border-box;
            width: calc(50% - 40px);
            display: flex;
            position: relative;
            transform: translateY(-80px);
        }

        .item:before {
            content: attr(data-text);
            letter-spacing: 3px;
            width: 100%;
            position: absolute;
            color: #000000;
            font-size: 13px;
            border-left: 2px solid rgba(0, 0, 0, 0.5);
            top: 70%;
            margin-top: -5px;
            padding-left: 15px;
            opacity: 0;
            right: calc(-100% - 56px);
            font: 900 20px '';
            letter-spacing: 5px;
        }

        .item:nth-child(even) {
            align-self: flex-end;
        }

        .item:nth-child(even):before {
            right: auto;
            text-align: right;
            left: calc(-100% - 56px);
            padding-left: 0;
            border-left: none;
            border-right: 2px solid rgba(255, 255, 255, 0.5);
            padding-right: 15px;
        }

        .item--active {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0px);
        }

        .item--active:before {
            top: 50%;
            transition: 0.3s all 0.2s;
            opacity: 1;
        }

        .item--active .content-title {
            margin: -50px 0 20px 0;
        }

        .img {
            max-width: 100%;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
        }

        .subtitle {
            color: rgba(255, 255, 255, 0.5);
            font-size: 16px;
            letter-spacing: 5px;
            margin: 10px 0 0 0;
            font-weight: normal;
        }

        .footer {
            padding: 95px 0;
            text-align: center;
        }

        .footer a {
            color: #999;
            display: inline-block;
        }

        @media only screen and (max-width: 767px) {
            .item {
                align-self: baseline !important;
                width: 100%;
                padding: 0 30px 150px 80px;
            }

            .item:before {
                left: 10px !important;
                padding: 0 !important;
                top: 50px;
                text-align: center !important;
                width: 60px;
                border: none !important;
            }

            .item:last-child {
                padding-bottom: 40px;
            }
        }

        @media only screen and (max-width: 767px) {
            .timeline:before {
                left: 40px;
            }
        }
        .el-tabs--card>.el-tabs__header {
            border-bottom: 0px solid #E4E7ED;
        }
        .btn-donation {
            color: #ffffff;
            background-color: #509AF8;
            border-color: #509AF8;
        }

        .bg-primary1 {
            background-color: #509AF8 !important;
        }
    </style>
</head>
<!--PreLoader-->
<div class="preloader">
    <div class="preloader-inner">
        <div class="siteloading-preloader"></div>
    </div>
</div>
<!--PreLoader Ends-->
<body>
<div id="app">
    <div th:replace="commons/front-bar::#header(currUri='projects',links=${links})"></div>

    <!-- Page Header -->
    <div class="page-header">
        <div class="page-header-content">
            <div class="container">
                <h2 class="heading" th:text="${project.name}"></h2>
            </div>
        </div>
    </div>

    <div class="main-wrapper">

        <div class="section" style="margin-bottom: 0px">
            <div class="container">
                <div class="power_event_details_top">
                    <div class="power_event_details_inner">
                        <div class="row">
                            <div class="col-lg-6 col-md-6">
                                <img style="width: 100%;height: 400px" th:src="${project.img}" alt="">
                                <div style="margin-top: 30px">
                                    <button type="button" class="btn btn-donation" data-toggle="modal" data-target="#inputModal" style="float: left;border-radius: 13px 13px 13px 13px;position: relative;top: -18px" id="bt_mk">
                                        我要捐赠
                                    </button>
                                    <div class="fund-raised-bar-3 barfiller" style="width: 50%;margin-left: 80px;margin-top: 10px;">
                                    </div><!-- .fund-raised-bar -->
                                    <br>
                                    <span style="margin-left: 20px">已筹：<span id="raised_money" class="fund-raised-total">
                                </span><!-- .fund-raised-total --></span>
                                    <span style="margin-left: 170px">
                                    目标：<span id="goal_money" class="fund-raised-goal" style="">
                                </span>
                                </span>
                                    <!-- 导入最新进度条 -->
                                    <div id="tr" style="position: relative;">
                                        <el-steps :space="200" :active="cur_step" finish-status="success">
                                            <el-step title="审批通过"></el-step>
                                            <el-step title="开始筹款"></el-step>
                                            <el-step title="正在筹款"></el-step>
                                            <el-step title="完成筹款"></el-step>
                                        </el-steps>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="power_event_details_left">
                                    <div class="list_content">
                                        <ul class="icon">
                                            <li><span>项目名称：</span>[[${project.name}]]</li>
                                            <li><span>发布时间：</span> [[${#dates.format(project.gmtCreate,'yyyy年MM月dd日 HH:mm:ss')}]]</li>
                                            <li><span>主题：</span> [[${project.theme}]]</li>
                                            <li><span>赞助：</span> [[${project.sponsor}]]</li>
                                            <li><span>背景：</span> [[${project.background}]]</li>
                                            <li><span>目的：</span> [[${project.target}]]</li>
                                            <li><span>项目类型：</span> [[${project.purposeName}]]</li>
                                            <li><span>爱心人次： <span id="to_num"></span></span></li>
                                        </ul>
                                        <div class="info" style="width: 380px">
                                            <div class="info__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none"><path fill="#393a37" d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path></svg>
                                            </div>
                                            <div class="info__title">本项目的捐款记录和项目进展已被区块链永久保护</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 此处是用来放时间轴的 -->
                                <!--                            <div class="latest_del">-->
                                <!--                                <h1 style="font-size: 20px;font-weight: bold;margin-left: 76px">最新进展</h1>-->
                                <!--&lt;!&ndash;                                此处放置时间轴&ndash;&gt;-->
                                <!--                                <div class="container3" style="margin-left: 20px">-->
                                <!--                                    <ul class="time_line">-->
                                <!--                                    </ul>-->
                                <!--                                    <a th:onclick="changeStyle()" class="text-danger" style="position: absolute;top: 160px;left: 65px;z-index: 1;font-weight: bold" href="#">点我查看更多进展</a>-->
                                <!--                                </div>-->
                                <!--                            </div>-->
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-labelledby="inputModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content" style="background-color: #F0F9FF;width: 1000px;position:relative;left: -230px">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="inputModalLabel" style="color: black">小小善举，托举新希望！</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <span style="font-size: 150%;font-weight: bold;margin-left: 100px">请输入单次捐款金额</span>
                                <hr style="color: black;border-width: 2px">
                                <div class="div_1" style="outline: none;margin-top: 10px;margin-left: 100px">
                                    <span><button style="width: 126px;height: 44px;line-height: 44px;text-align: center;border: #7d4699 solid 1px;display: block;border-radius: 50px;font-size: 16px;color: #7d4699;float: left" id="bt_1" th:onclick="cli_1()">￥100</button></span>
                                    <span><button style="width: 126px;height: 44px;line-height: 44px;text-align: center;border: #7d4699 solid 1px;display: block;border-radius: 50px;font-size: 16px;color: #7d4699;float: left;margin-left: 8px" id="bt_2" th:onclick="cli_2()">￥200</button></span>
                                    <span><button style="width: 126px;height: 44px;line-height: 44px;text-align: center;border: #7d4699 solid 1px;display: block;border-radius: 50px;font-size: 16px;color: #7d4699;float: left;margin-left: 8px" id="bt_3" th:onclick="cli_3()">￥300</button></span>
                                    <span><button style="width: 126px;height: 44px;line-height: 44px;text-align: center;border: #7d4699 solid 1px;display: block;border-radius: 50px;font-size: 16px;color: #7d4699;float: left;margin-left: 8px" id="bt_4" th:onclick="cli_4()">￥400</button></span>
                                </div>
                                <div style="width: 316px;height: 44px;border: #7d4699 solid 1px;border-radius: 50px;float: left;margin-right: 15px;box-sizing: border-box;margin-left: 100px;margin-top: 12px">
                                    <span style="text-decoration:none; font-size:100%;color: #7d4699;margin-left: 10px;">￥</span>
                                    <input placeholder="您希望捐助的其他金额" style="height: 42px;font-size: 14px;color: #929292;font-family: '微软雅黑';margin-left: 10px;text-indent: 10px;width: 70%;outline: none;background-color: #F0F9FF" id="wishMoney" th:onclick="cli_5()">
                                </div>
                                <span style="font-size: 150%;font-weight: bold;margin-left: 100px;margin-top: 28px">请说出您想说的话</span>
                                <hr style="color: black;border-width: 2px">
                                <div style="width: 316px;height: 44px;border: #7d4699 solid 1px;border-radius: 50px;float: left;margin-right: 15px;box-sizing: border-box;margin-left: 100px;margin-top: 12px">
                                    <span style="text-decoration:none; font-size:100%;color: #7d4699;margin-left: 10px;">心愿</span>
                                    <input placeholder="您的心愿" style="height: 42px;font-size: 14px;color: #929292;font-family: '微软雅黑';margin-left: 10px;text-indent: 10px;width: 70%;outline: none;background-color: #F0F9FF" id="wishInput">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-success" th:onclick="SendDonatorMessage()">提交</button>
                                </div>
                                <button type="button" class="btn btn-success" th:onclick="SendDonatorMessage()" style="display: none">提交</button>
                            </div>
                        </div>
                        <div class="notifications" style=""></div>
                    </div>
                    <div style="margin-top: 30px">
                        <el-tabs type="card" v-model="activeName">
                            <el-tab-pane label="具体内容" name="first">
                                <div class="row" id="detail_row">
                                    <div class="col-lg-12 col-md-12 main-content">
                                        <div class="power_blog_details">
                                            <div class="power_blog_wrapper">
                                                <div class="row" style="">
                                                    <div class="col-lg-9 col-md-9">
                                                        <div class="power_blog_full_content">
                                                            <div id="doc-content" class="post-content" style="padding: 5px 0px 20px 0px">
                                                                <textarea style="display:none;">[[${project.content}]]</textarea>
                                                            </div>
                                                            <script type="text/javascript">
                                                                var testEditor;
                                                                $(function () {
                                                                    testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
                                                                        htmlDecode      : "style,script,iframe",  // you can filter tags decode
                                                                        taskList        : true,
                                                                        tex             : true,  // 默认不解析
                                                                        flowChart       : true,  // 默认不解析
                                                                        sequenceDiagram : true,  // 默认不解析
                                                                    });
                                                                });
                                                            </script>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 col-md-3" id="move_d">
                                                        <div id="is_show">
                                                            <div class="card text-white bg-primary1 mb-3" style="max-width: 18rem;">
                                                                <div class="card-header">更多公益项目</div>
                                                            </div>
                                                            <br>
                                                            <div class="power_events_list fifth" th:each="temp:${projects}">
                                                                <div class="power_events_list_wrapper">
                                                                    <div class="power_events_list_image">
                                                                        <img class="primary_img" style="width: 146px;height: 100px" th:src="${temp.img}" alt="">
                                                                    </div>
                                                                    <div class="power_events_list_content" style="margin-bottom: 10px;font-size: 12px">
                                                                        <h6><a th:href="@{project(id=${temp.id})}">[[${temp.name}]]</a></h6>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="项目进展" name="second">
                                <div class="shell" id="shell">
                                    <div class="header">
                                        <a href="#" th:onclick="changeStyle1()" style="position:relative;top: -70px;right: -710px;font-size: 16px;font-weight: bold;color: #fff">返回</a>
                                        <h2 class="title">我们一起走过了这些路</h2>
                                        <h3 class="subtitle">感谢你们</h3>
                                    </div>
                                    <div class="timeline">
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="项目收支" name="third">
                                <el-table
                                        :data="tableData"
                                        height="750"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            prop="time"
                                            label="时间"
                                            width="180"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="amount"
                                            label="金额"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="username"
                                            label="对象"
                                            width="160">
                                    </el-table-column>
                                    <el-table-column
                                            prop="message"
                                            label="心愿" width="320">
                                    </el-table-column>
                                    <el-table-column
                                            prop="address"
                                            label="支付方式">
                                    </el-table-column>
                                    <el-table-column
                                            label="平台">
                                        <template slot-scope="scope">
                                            <img src="front/images/zfb.png" alt="图片" style="width: 50%;height: 50%">
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                        <div class="comment_sec">
                            <div class="comment_form" style="margin-top: 20px">
                                <div class="comment_form_heading_wrapper" style="margin-bottom: 10px">
                                    <h1 class="comment_title">发表评论</h1>
                                    <h6 class="comment_sub_title">随时分享你的想法，我们会积极采纳意见！ </h6>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group" style="margin-bottom: 0px">
                                            <textarea id="content" name="message" class="form-control" th:if="${session.loginUser != null}" placeholder="此处填写评论内容..."></textarea>
                                            <textarea id="content" name="message" class="form-control" th:if="${session.loginUser == null}" disabled placeholder="登录后可发表评论..."></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="power_button_group">
                                            <input class="power_button effect_1" th:if="${session.loginUser != null}" th:onclick="addComment([[${project.id}]],[[${type}]])" type="submit" value="发表" name="submit">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <ul class="comment_area" style="margin-top: 20px;" >

                                <li class="blog-comment-user" th:if="${first!=null}">
                                    <div class="commenter-div">
                                        <div class="commenter">
                                            <img alt="John Doe" th:src="${first.img}" class="avatar">
                                        </div>
                                        <div class="comment-block">
                                            <h4>[[${first.userName}]]<span class="reply"> <span style="font-weight: bold;color: blue;margin-right: 10px">置顶</span> <a th:onclick="replyComment([[${first.userName}]],[[${first.id}]],[[${first.content}]],[[${type}]])" href="#" class="comment-reply-link">回复</a></span></h4>
                                            <h6 th:text="${#dates.format(first.gmtCreate,'yyyy年MM月dd日 HH:mm:ss')}"></h6>
                                            <p th:text="${first.content}"></p>
                                        </div>
                                    </div>

                                    <ul class="children" th:if="${first.replyComments != null}">
                                        <li class="blog-comment-user" th:each="children:${first.replyComments}">
                                            <div class="commenter-div">
                                                <div class="commenter">
                                                    <img alt="admin" th:src="${children.img}" class="avatar">
                                                </div>
                                                <div class="comment-block">
                                                    <h4 th:text="${children.userName}"></h4>
                                                    <h6 th:text="${#dates.format(children.gmtCreate,'yyyy年MM月dd日 HH:mm:ss')}"></h6>
                                                    <p th:text="${children.content}"></p>
                                                </div>
                                            </div>
                                        </li><!-- #comment-## -->
                                    </ul><!-- .children -->
                                </li><!-- #comment-## -->

                                <li class="blog-comment-user" th:each="comment:${comments}">
                                    <div class="commenter-div">
                                        <div class="commenter">
                                            <img alt="John Doe" th:src="${comment.img}" class="avatar">
                                        </div>
                                        <div class="comment-block">
                                            <h4>[[${comment.userName}]]<span class="reply"><a th:onclick="replyComment([[${comment.userName}]],[[${comment.id}]],[[${comment.content}]],[[${type}]])" href="#" class="comment-reply-link">回复</a></span></h4>
                                            <h6 th:text="${#dates.format(comment.gmtCreate,'yyyy年MM月dd日 HH:mm:ss')}"></h6>
                                            <p th:text="${comment.content}"></p>
                                        </div>
                                    </div>

                                    <ul class="children" th:if="${comment.replyComments != null}">
                                        <li class="blog-comment-user" th:each="children:${comment.replyComments}">
                                            <div class="commenter-div">
                                                <div class="commenter">
                                                    <img alt="admin" th:src="${children.img}" class="avatar">
                                                </div>
                                                <div class="comment-block">
                                                    <h4 th:text="${children.userName}"></h4>
                                                    <h6 th:text="${#dates.format(children.gmtCreate,'yyyy年MM月dd日 HH:mm:ss')}"></h6>
                                                    <p th:text="${children.content}"></p>
                                                </div>
                                            </div>
                                        </li><!-- #comment-## -->
                                    </ul><!-- .children -->
                                </li><!-- #comment-## -->
                            </ul>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="border-radius: 13px 13px 13px 13px;width: 300px;height: 400px;position:relative;right:-150px;top:100px">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel" style="color: #509AF8;font-size: 16px;font-weight: 700;line-height: 1.2857em;">链上善行|爱心传递，温暖相随</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img id="donation_url" src="" alt="Base64 encoded image">
                </div>

                <span style="color: #509AF8;position:relative;left:0px;top:-20px">支付宝(沙盒)扫一扫，前往手机端进行支持</span>
            </div>
        </div>
        <div style="width: 300px;
    height: 400px;
    float: right;
    position: relative;
    top: -320px;
    left: -310px;">
            <img src="https://hnfnu.oss-cn-hangzhou.aliyuncs.com/o/179666dac6d04d1c9992aea2b16448f3.png
" style="max-width: 270px;">
            <img src="https://hnfnu.oss-cn-hangzhou.aliyuncs.com/o/81d48c717a174068bc2b0db2b16cf8cd.png" style="max-width: 270px;">
            <div class="card" style="max-width: 270px">
                <div class="card-body">
                    请您下载沙箱版支付宝进行模拟支付
                </div>
            </div>
        </div>
        <div class="notifications" style=""></div>
    </div>
</div>
</div>
<button id="success_not" class="notification-btn success" onclick="openSuccess()" style="display: none">成功</button>
<button id="info_not" class="notification-btn info" onclick="openInfo()" style="display: none">成功</button>
<button id="warn_not" className="notification-btn warning" onClick="openWarning()" style="display: none">警告</button>
<button id="error_not" className="notification-btn error" onClick="openError()" style="display: none">错误</button>

<div th:replace="commons/front-bar::#footer"></div>
</div>
<!-- All JavaScript Files
================================================== -->


<script>
    //进行初始化
    localStorage.setItem('url',window.location.href);
    //来进行监视数据
    var surveyRatingSelect = document.getElementById('surveyRating');
    surveyRatingSelect.addEventListener('change', function() {
    });
    function ToSatisFac(){
        $.ajax({
            url: "/blockchain-kindness/donations/addSatisfaction",
            type: "post",
            data: {
                grade : surveyRatingSelect.value
            },
            success: function (data) {
                if(data.message === '投票成功') {
                    document.getElementById('yourModalId').style.display = 'none';
                    alert("感谢您的反馈")
                }else{
                    alert("您没有输入合适的信息")
                }
            },
            error: function (data) {
            }
        });
    }
</script>
<script>
    var donation_m = 0;
    var a;
    function cli_1(){
        document.getElementById('bt_1').style.backgroundColor = "rgb(125, 70, 153)";
        document.getElementById('bt_1').style.color = "rgb(255, 255, 255)";
        document.getElementById('bt_2').style.backgroundColor = "white";
        document.getElementById('bt_2').style.color = "#7d4699";
        document.getElementById('bt_3').style.backgroundColor = "white";
        document.getElementById('bt_3').style.color = "#7d4699";
        document.getElementById('bt_4').style.backgroundColor = "white";
        document.getElementById('bt_4').style.color = "#7d4699";
        donation_m = 100;
    }
    function cli_2() {
        donation_m = 200;
        document.getElementById('bt_2').style.backgroundColor = "rgb(125, 70, 153)";
        document.getElementById('bt_2').style.color = "rgb(255, 255, 255)";
        document.getElementById('bt_1').style.backgroundColor = "white";
        document.getElementById('bt_1').style.color = "#7d4699";
        document.getElementById('bt_3').style.backgroundColor = "white";
        document.getElementById('bt_3').style.color = "#7d4699";
        document.getElementById('bt_4').style.backgroundColor = "white";
        document.getElementById('bt_4').style.color = "#7d4699";
        a = JSON.stringify({
            "amount": donation_m,
            "message": message,
            "projectId": getUrlParameter('id'),
        })
    }
    function cli_3(){
        document.getElementById('bt_3').style.backgroundColor = "rgb(125, 70, 153)";
        document.getElementById('bt_3').style.color = "rgb(255, 255, 255)";
        document.getElementById('bt_2').style.backgroundColor = "white";
        document.getElementById('bt_2').style.color = "#7d4699";
        document.getElementById('bt_1').style.backgroundColor = "white";
        document.getElementById('bt_1').style.color = "#7d4699";
        document.getElementById('bt_4').style.backgroundColor = "white";
        document.getElementById('bt_4').style.color = "#7d4699";
        donation_m = 300;
    }
    let wishMoney;
    function cli_4(){
        document.getElementById('bt_4').style.backgroundColor = "rgb(125, 70, 153)";
        document.getElementById('bt_4').style.color = "rgb(255, 255, 255)";
        document.getElementById('bt_2').style.backgroundColor = "white";
        document.getElementById('bt_2').style.color = "#7d4699";
        document.getElementById('bt_3').style.backgroundColor = "white";
        document.getElementById('bt_3').style.color = "#7d4699";
        document.getElementById('bt_1').style.backgroundColor = "white";
        document.getElementById('bt_1').style.color = "#7d4699";
        donation_m = 400;
    }

    function cli_5(){
        document.getElementById('bt_4').style.backgroundColor = "white";
        document.getElementById('bt_4').style.color = "#7d4699";
        document.getElementById('bt_2').style.backgroundColor = "white";
        document.getElementById('bt_2').style.color = "#7d4699";
        document.getElementById('bt_3').style.backgroundColor = "white";
        document.getElementById('bt_3').style.color = "#7d4699";
        document.getElementById('bt_1').style.backgroundColor = "white";
        document.getElementById('bt_1').style.color = "#7d4699";
        donation_m = 0;
    }
    // 监听用户心愿输入框输入事件
    document.getElementById('wishInput').addEventListener('input', function() {
        message = this.value;
    });
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }
    $.ajax({
        url : "/blockchain-kindness/donations//getNumberOfDonors",
        type :"GET",
        data : {
            "projectId": getUrlParameter('id'),
        },
        success(resp){
            var td_n = resp.data.todayNumber;
            var to_n = resp.data.totalNumber;
            var element2 = document.getElementById("to_num");
            element2.innerHTML = to_n;
        },
        error(resp){
        }
    })
    //订单号
    var tradeNo;
    function SendDonatorMessage() {
        // 监听捐款金额按钮点击事件
        // 假设id是已定义的变量
        $.ajax({
            url: "/blockchain-kindness/donations/makeDonation",
            type: "POST",
            contentType: "application/json", // 添加此行
            data:JSON.stringify(
                {
                    "amount": (donation_m!==0)?donation_m:document.getElementById('wishMoney').value,
                    "message": document.getElementById('wishInput').value,
                    "projectId": getUrlParameter('id'),
                },
            ),
            success: function (data) {
                // $('#inputModal').modal('hide');
                // $('.modal-backdrop').remove(); // This line removes the backdrop
                if(data.message === '请登录')
                    window.location.href = '/blockchain-kindness/login'
                if(data.message === '捐款成功'){
                    //觸發模態框
                    $('#qrcode').html('<img src="data:image/png;base64,' + data.data + '" />');
                    var imgElement = document.getElementById('donation_url');
                    var newBase64String = "data:image/png;base64,"+data.data.qrImgUrl;
                    tradeNo = data.data.tradeNo;
                    imgElement.src = newBase64String;
                    var element = document.querySelector('#info_not');
                    element.click();
                    function hideModalAndShowAnother() {
                        $('#inputModal').modal('hide');
                        $('#staticBackdrop').modal('show');
                        var max_time = 360
                        var cur_time = 0;
                        const interval = setInterval(function(){
                            cur_time ++;
                            $.ajax(({
                                url : "donations/isPay",
                                type : "GET",
                                data : {
                                    "tradeNo": tradeNo,
                                },
                                success(resp){
                                    // console.log(resp);
                                    if(resp.data === '1'){
                                        var element = document.querySelector('#success_not');
                                        element.click();
                                        function hide(){
                                            $('#staticBackdrop').modal('hide');
                                        }
                                        setTimeout(hide,3000);
                                        clearInterval(interval)
                                    }
                                },
                                error(){
                                    console.log("接口调用发生了报错")
                                }
                            }))
                            // console.log(cur_time)
                            if(cur_time >= max_time) {
                                var element = document.querySelector('#warn_not');
                                element.click();
                                setTimeout(function (){
                                    $('#staticBackdrop').modal('hide');
                                },2000)
                                clearInterval(interval)
                            }
                        },500)
                    }
                    setTimeout(hideModalAndShowAnother, 3000);
                }
                if(data.message === '输入正确的金额'){
                    var element = document.querySelector('#error_not');
                    element.click();
                }
            },
            error: function (data) {
                var element = document.querySelector('#error_not');
                element.click();
            }
        });
    }

    //字段添加完成后再来计算

    //对支付状态进行实时监控
</script>
<script>
    function showMore(){
        const hiddenItems = document.querySelectorAll('#content-container .hidden');
        const visibleItemCount = 0; // 初始已展示的元素数量
        let currentVisibleCount = visibleItemCount;
        // 每次最多展示5个新元素
        for (let i = 0; i < 5 && i < hiddenItems.length; i++) {
            if (currentVisibleCount + i < hiddenItems.length) {
                hiddenItems[currentVisibleCount + i].classList.remove('hidden');
            }
        }
        // 更新当前可见元素计数
        currentVisibleCount += 5;

        // 如果所有元素都已展示，隐藏加载更多按钮
        if (currentVisibleCount >= hiddenItems.length) {
            document.querySelector('#load-more-btn').style.display = "none";
        }
    }
    function formatTime(timeString) {
        const date = new Date(timeString);
        const now = new Date();
        const diffInSeconds = Math.floor((now - date) / 1000);
        if (diffInSeconds < 60) {
            return `${diffInSeconds}秒前`;
        }
        const diffInMinutes = Math.floor(diffInSeconds / 60);
        if (diffInMinutes < 60) {
            return `${diffInMinutes}分钟前`;
        }
        const diffInHours = Math.floor(diffInSeconds / (60 * 60));
        if (diffInHours < 24) {
            return `${diffInHours}小时前`;
        }
        const diffInDays = Math.floor(diffInSeconds / (60 * 60 * 24));
        if (diffInDays < 30) {
            return `${diffInDays}天前`;
        }
        // 如果时间跨度超过一个月，这里仅返回原始日期时间字符串
        return timeString;
    }

    var pro_name;
    document.addEventListener("DOMContentLoaded", function() {
        var headingElement = document.querySelector('h2.heading');
        var headingText = headingElement.textContent || headingElement.innerText;
        pro_name = headingText;
    });
    $(document).ready(function () {
        $.ajax({
            url : "donations/getDonationsByProjectId",
            type: "GET",
            data:{
                "projectId" :getUrlParameter('id'),
            },
            success(resp){
                const filteredProjects = resp.data;
                var len = filteredProjects.length
                var spanElement = document.getElementById("tt_num");
                const formattedArrays = filteredProjects.map(record => [
                    record.username+
                    ` 捐出${record.amount}元                                                    `+ "                            " +
                    formatTime(record.time)
                ]);
                const containerElement = document.getElementById("content-container");
                formattedArrays.forEach((itemContent, index) => {
                    const newItem = document.createElement("div");
                    newItem.classList.add("itema");

                    // 为索引大于等于2的元素添加 'hidden' 类
                    if (index >= 2) {
                        newItem.classList.add("hidden");
                    }

                    newItem.textContent = itemContent;

                    // containerElement.appendChild(newItem);
                });
            },
            error(resp){
            }
        })
        //获取项目最新进展
        $.ajax(({
            url : "disburse/getDisburses",
            type : "GET",
            success(resp){
                const filteredProjects = resp.data.filter(project => project.projectName === pro_name);
                var element2 = document.getElementById("to_kind");
                const moreButton = document.querySelector('a.text-danger');
                const timeLineList = document.querySelector('.time_line');
                let addedItemsCount = 0;
                //渲染界面上的时间线
                //渲染总体时间线
                filteredProjects.forEach((item) => {
                    const formattedDate = item.time.slice(0, 7); // 提取日期部分（前10个字符）
                    const newItemHtml = `
      <div class="item" data-text="${item.progress}">
        <div class="content">
          <img src="${item.address}" alt="" class="img">
          <h2 class="content-title">${formattedDate}</h2>
          <p class="content-desc">
            ${item.description},共拨付了${item.amount}元
          </p>
        </div>
      </div>
    `;

                    const timelineContainer = document.querySelector('.timeline');

                    timelineContainer.insertAdjacentHTML('beforeend', newItemHtml);

                });
            }
        }))
    })
</script>
<script>
    document.addEventListener('scroll', handleScroll);

    function handleScroll() {
        const timelineItems = document.querySelectorAll('.timeline .item');
        timelineItems.forEach((item) => {
            const itemRect = item.getBoundingClientRect();
            const imgRect = item.querySelector('.img').getBoundingClientRect();
            const isImgTopAtViewportTop = imgRect.top >= 0 && imgRect.top <= window.innerHeight;

            if (imgRect.y<100) {
                item.classList.add('item--active');
            } else {
                item.classList.remove('item--active');
            }
        });
    }
</script>
<script>
    function createNotification(type, title, message) {
        const notificationDiv = document.createElement('div');
        notificationDiv.classList.add('notification', type, 'show');

        const titleElement = document.createElement('strong');
        titleElement.textContent = title;
        notificationDiv.appendChild(titleElement);

        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        notificationDiv.appendChild(messageElement);
        const notificationsContainer = document.getElementsByClassName('notifications');
        notificationsContainer[0].appendChild(notificationDiv);

        setTimeout(() => {
            notificationDiv.classList.remove('show');
            setTimeout(() => {
                notificationsContainer.removeChild(notificationDiv);
            }, 300);
        }, 3000);
    }
    function createNotification1(type, title, message) {
        const notificationDiv = document.createElement('div');
        notificationDiv.classList.add('notification', type, 'show');

        const titleElement = document.createElement('strong');
        titleElement.textContent = title;
        notificationDiv.appendChild(titleElement);

        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        notificationDiv.appendChild(messageElement);
        const notificationsContainer = document.getElementsByClassName('notifications');
        notificationsContainer[1].appendChild(notificationDiv);

        setTimeout(() => {
            notificationDiv.classList.remove('show');
            setTimeout(() => {
                notificationsContainer.removeChild(notificationDiv);
            }, 300);
        }, 3000);
    }

    function openSuccess() {
        createNotification1('success', '支付成功，链上善行与你一起相伴公益');
    }

    function openWarning() {
        createNotification1('warning', '长时间未响应，请尝试重新捐款');
    }

    function openInfo() {
        createNotification('info', '请注意扫码');
    }

    function openError() {
        createNotification('error', '错误', '您输入的信息有错，请重新输入');
    }

    function changeToPro(){
        var element_1 = document.querySelector('#detail_row');
        element_1.style.display = "none";
        var element = document.querySelector('#shell');
        element.style.display = "block";
    }
        $.ajax({
            url: "/blockchain-kindness/donations/getGoalAndRaised",
            type: "GET",
            data: {
                "projectId": getUrlParameter('id')
            },
            success(resp) {
                let raise;
                let goal;
                if (resp.data === null) {
                    goal = 0;
                    raise = 0;
                } else {
                    raise = resp.data.raised;
                    goal = resp.data.goal;
                }
                if (goal === 0) {
                    var element5 = document.getElementById('bt_mk');
                    element5.classList.add('disabled');
                }
                let element1 = document.getElementById("raised_money");
                element1.innerHTML = raise;
                let element2 = document.getElementById("goal_money");
                element2.innerHTML = goal;
                //百分数
                let percentage = (raise / goal) * 100;
                percentage = percentage.toFixed(2);
                if (percentage > 100)
                    percentage = 100
                if (raise === 0 && goal === 0)
                    percentage = 0;
                var targetDiv = document.querySelector('.fund-raised-bar-3.barfiller');
                var tipWrapDiv = document.createElement('div');
                tipWrapDiv.className = 'tipWrap';
                var tipSpan = document.createElement('span');
                tipSpan.className = 'tip';
                tipWrapDiv.appendChild(tipSpan);
                targetDiv.appendChild(tipWrapDiv);
                var newSpan = document.createElement('span');
                newSpan.className = 'fill';
                newSpan.dataset.percentage = percentage + "";
                newSpan.style.backgroundColor = 'white';
                var parentElement = document.querySelector('.fund-raised-bar-3');
                parentElement.appendChild(newSpan);
            },
            error(resp) {
            }
        })
</script>
<script src="front/js/vue.js"></script>
<!-- import JavaScript -->
<script src="front/js/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return{
                cur_step: 3,
                visible: false,
                activeName: 'first',
                tableData: [],//用来做遍历的表
            }
        },
        method: {
            //调用ajax方法进行赋值
        },
        computed: {
            // 计算属性来动态计算active的值
            computedActiveStep() {
                if (this.goalMoney === 0) return 3;
                if (this.goalMoney >= 0 && this.raisedMoney < this.goalMoney) return 3;
                if (this.raisedMoney >= this.goalMoney) return 4;
                return this.curStep; // 默认情况或异常处理
            },
        },
        mounted: function () {
            //防止undefined
            this.raisedMoney = parseInt(document.getElementById('raised_money').innerText);
            this.goalMoney = parseInt(document.getElementById('goal_money').innerText);
            //调用ajax方法渲染tableData
            $.ajax({
                url: "donations/getDonationsByProjectId",
                type: "GET",
                data: {
                    "projectId": getUrlParameter('id'),
                },
                success: (resp) => {
                    this.tableData = resp.data.map(item => ({
                        ...item,
                        "address": '支付宝'
                    }));
                }
            })
        },
        watch: {
            // 监听raisedMoney和goalMoney的变化，这里仅做示例，真实场景中应避免直接操作DOM
            'raisedMoney': function (newVal) {
                this.raisedMoney = newVal;
            },
            'goalMoney': function (newVal) {
                this.goalMoney = newVal;
            },
            'activeName' : function (newVal){
                if(newVal === 'first'){
                    let element = document.querySelector('#is_show')
                    element.style.display = 'block'
                }
                if(newVal === 'second'){
                    let element = document.querySelector('#is_show')
                    element.style.display = 'none'
                }
                if(newVal === 'third'){
                    let element = document.querySelector('#is_show')
                    element.style.display = 'none'
                }
            }
        },
    })

    function updateStepBasedOnFundraisingStatus(raised, goal) {
        if (goal === 0) {
            app.cur_step = 3;
        } else if (goal >= 0 && raised < goal) {
            app.cur_step = 3;
        } else if (raised >= goal) {
            app.cur_step = 4;
        }
    }

    // 假设您有方法获取raised和goal的值
    let raised = document.getElementById("raised_money").innerHTML;
    let goal = document.getElementById("goal_money").innerHTML;
    updateStepBasedOnFundraisingStatus(raised - '0', goal - '0');
</script>
<!--<script>-->
<!--</script>-->
<!--<script type='text/javascript' src='front/js/move/jquery.js'></script>-->
<script type='text/javascript' src='front/js/move/jquery.collapsible.min.js'></script>
<script type='text/javascript' src='front/js/move/swiper.min.js'></script>
<script type='text/javascript' src='front/js/move/jquery.countdown.min.js'></script>
<script type='text/javascript' src='front/js/move/circle-progress.min.js'></script>
<script type='text/javascript' src='front/js/move/jquery.countTo.min.js'></script>
<script type='text/javascript' src='front/js/move/jquery.barfiller.js'></script>
<script type='text/javascript' src='front/js/move/custom.js'></script>

</body>
</html>